<template>
	<view class="page-container">
		<!-- 顶部区域 -->
		<view class="header">
			<view class="title">环境卫士</view>
			<view class="subtitle">让城市更美好，从你我做起</view>
		</view>

		<!-- 规则区域 -->
		<scroll-view class="content" scroll-y>
			<!-- 主要规则卡片 -->
			<view class="rule-card">
				<view class="card-title">
					<uni-icons type="info" size="20" color="#07c160"></uni-icons>
					<text>活动规则</text>
				</view>
				<view class="rule-item">
					<view class="rule-header">登录限制</view>
					<view class="rule-content">仅限认证用户参与活动，严禁除癣员登录参与</view>
				</view>
				<view class="rule-item">
					<view class="rule-header">上传规则</view>
					<view class="rule-content">间隔5米内仅可上传一组清理成果照片</view>
				</view>
				<view class="rule-item">
					<view class="rule-header">
						<view class="rule-header-content">
							<text>区域限制</text>

						</view>
						<view class="rule-content">仅限高新南区，石羊、桂溪、肖家河、芳草4个街道办内上传有效，区域外上传无效</view>
						<view
							style="background-color: #eff6ff;border-color: #dbeafe;padding: 0.75rem;margin-top: 0.5rem;border-radius: 1rem;"
							@click="handleNavigateToMap">
							<uni-icons class="map-icon" type="location" size="16" color="#07c160"></uni-icons>
							点击查看详细区域范围。
						</view>

					</view>
				</view>
			</view>

			<!-- 清理对象卡片 -->
			<view class="target-card">
				<view class="card-title">
					<uni-icons type="checkbox" size="20" color="#07c160"></uni-icons>
					<text>有效清理对象</text>
				</view>
				<view class="target-grid">
					<view class="target-item" v-for="(item,index) in targetArr" :key="index">
						<image class="target-image" :src="item.url" mode="aspectFill"></image>
						<text>{{item.name}}</text>
					</view>

				</view>
			</view>

			<!-- 定价审核卡片 -->
			<view class="price-card">
				<view class="card-title">
					<uni-icons type="medal" size="20" color="#07c160"></uni-icons>
					<text>定价与审核</text>
				</view>
				<view class="price-content">
					<view class="price-item">
						<text class="price-label">定价标准</text>
						<text class="price-value">2-5分/张</text>
					</view>
					<view class="price-item">
						<text class="price-label">结算周期</text>
						<text class="price-value">每周结算</text>
					</view>
					<view class="warning">
						<uni-icons type="info" size="16" color="#ff4d4f"></uni-icons>
						<text>弄虚作假将清零积分，重新从2分/张计算</text>
					</view>
				</view>
			</view>


		</scroll-view>

		<!-- 底部按钮 -->
		<view class="footer">
			<button class="primary-btn" type="primary" @click="joinNow">立即参与</button>
		</view>
		<signview ref="getUserInfoRef"></signview>
	</view>
</template>

<script lang="ts" setup>
	import { resourcesPath } from '@/config/common.js'
	import {
		mainStore
	} from '@/store/index.js';
	import { ref } from 'vue'
	import { validateIsLogin } from '@/hooks/validateIsLogin.js'

	const getUserInfoRef = ref(null)
	const { validateLogin } = validateIsLogin(getUserInfoRef)

	// 组件逻辑
	const targetArr = [
		{
			name: '立杆',
			url: resourcesPath + '/image/lg.jpg'
		},
		{
			name: '箱柜',
			url: resourcesPath + '/image/xg.jpg'
		},
		{
			name: '宣传栏',
			url: resourcesPath + '/image/xcl.jpg'
		},
		{
			name: '公交站',
			url: resourcesPath + '/image/gjz.jpg'
		}
	]

	const handleNavigateToMap = () => {
		uni.navigateTo({
			url: '/pages/range/range'
		})
	}
	const joinNow = () => {
		if (!validateLogin()) {
			return
		}
		uni.redirectTo({
			url: '/pages/upload/upload'
		})
	}
</script>

<style>
	page {
		height: 100%;
	}

	.page-container {
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
	}

	.header {
		padding: 40rpx 30rpx;
		background-color: #07c160;
		color: #ffffff;
		flex-shrink: 0;
	}

	.title {
		font-size: 36px;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.subtitle {
		font-size: 14px;
		opacity: 0.9;
	}

	.content {
		flex: 1;
		overflow: auto;
		padding: 30rpx;
		width: calc(100% - 60rpx);
	}

	.rule-card,
	.target-card,
	.price-card,
	.stats-card {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	}

	.card-title {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		font-size: 16px;
		font-weight: bold;
		color: #333333;
	}

	.card-title text {
		margin-left: 10rpx;
	}

	.rule-item {
		margin-bottom: 20rpx;
	}

	.rule-header {
		font-size: 14px;
		color: #07c160;
		margin-bottom: 10rpx;
		font-weight: 500;
	}

	.rule-content {
		font-size: 14px;
		color: #666666;
		line-height: 1.5;
	}

	.target-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20rpx;
	}

	.target-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.target-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 12rpx;
		margin-bottom: 10rpx;
	}

	.target-item text {
		font-size: 12px;
		color: #666666;
	}

	.price-content {
		background: #f8f8f8;
		padding: 20rpx;
		border-radius: 12rpx;
	}

	.price-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.price-label {
		font-size: 14px;
		color: #666666;
	}

	.price-value {
		font-size: 14px;
		color: #07c160;
		font-weight: 500;
	}

	.warning {
		display: flex;
		align-items: center;
		color: #ff4d4f;
		font-size: 12px;
		background-color: #fefce8;
		border-color: #fef9c3;
		padding: 1rem;
		border-radius: 1rem;
	}

	.warning text {
		/* margin-left: 10rpx; */
	}

	.stats-content {
		display: flex;
		justify-content: space-between;
	}

	.stats-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.stats-number {
		font-size: 24px;
		color: #07c160;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.stats-label {
		font-size: 12px;
		color: #999999;
	}

	.footer {
		padding: 30rpx;
		background: #ffffff;
		flex-shrink: 0;
	}

	.primary-btn {
		background: #07c160;
		color: #ffffff;
		font-size: 16px;
		border-radius: 44rpx;
	}
</style>